<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">

<script type="text/javascript" src="../js/checkUserInfo.js">
</script>

<head>
    <meta charset="UTF-8">
    <title>MyPetstore</title>
</head>
<body>
<div th:replace="common/top"></div>

<div id="Content">

    <div id="BackLink">
        <a href="/catalog/view">Back</a>
    </div>

    <p align="center"><font color="green" th:text="${editMsg}"></font></p>

<div id="Catalog">

    <form action="/account/editAccount" method="post">
        <h3>User Information</h3>

        <table class="rwd-table">
            <tr>
                <td>User ID:</td>
                <td><input type="text" name="username" readonly="readonly" th:value="${editAccount.username}"></td>
            </tr>
            <tr>
                <td>New password:</td>
                <td><input type="password" name="password"/></td>
            </tr>
            <tr>
                <td>Repeat password:</td>
                <td><input type="password" name="repeatedPassword"/></td>
            </tr>
        </table>

        <h3>Account Information</h3>

        <table class="rwd-table">
            <tr>
                <td>First name:</td>
                <td><input type="text" name="firstName" th:value="${editAccount.firstName}"/></td>
            </tr>
            <tr>
                <td>Last name:</td>
                <td><input type="text" name="lastName" th:value="${editAccount.lastName}"/></td>
            </tr>
            <tr>
                <td>Email:</td>
                <td><input type="text" size="40" name="email" th:value="${editAccount.email}"/></td>
            </tr>
            <tr>
                <td>Phone:</td>
                <td><input type="text" name="phone" th:value="${editAccount.phone}"/></td>
            </tr>
            <tr>
                <td>Address 1:</td>
                <td><input type="text" name="address1" size="40" th:value="${editAccount.address1}"/></td>
            </tr>
            <tr>
                <td>Address 2:</td>
                <td><input type="text" name="address2" size="40" th:value="${editAccount.address2}"/></td>
            </tr>
            <tr>
                <td>City:</td>
                <td><input type="text" name="city" th:value="${editAccount.city}"/></td>
            </tr>
            <tr>
                <td>State:</td>
                <td><input type="text" name="state" th:value="${editAccount.state}"/></td>
            </tr>
            <tr>
                <td>Zip:</td>
                <td><input type="text" name="zip" th:value="${editAccount.zip}"/></td>
            </tr>
            <tr>
                <td>Country:</td>
                <td><input type="text" name="country" th:value="${editAccount.country}"/></td>
            </tr>
        </table>

        <h3>Profile Information</h3>

        <table class="rwd-table">
            <tr>
                <td>Language Preference:</td>
                <td>
                    <select name="languagePreference">
                        <option value="japanese"
                                th:selected="${editAccount.languagePreference eq 'japanese'}"
                        >japanese
                        </option>
                        <option value="english"
                                th:selected="${editAccount.languagePreference eq 'english'}"
                        >english
                        </option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Favourite Category:</td>
                <td>
                    <select name="favouriteCategoryId">
                        <option value="BIRDS"
                                th:selected="${editAccount.favouriteCategoryId eq 'BIRDS'}"
                        >BIRDS
                        </option>
                        <option value="DOGS"
                                th:selected="${editAccount.favouriteCategoryId eq 'DOGS'}"
                        >DOGS
                        </option>
                        <option value="CATS"
                                th:selected="${editAccount.favouriteCategoryId eq 'CATS'}"
                        >CATS
                        </option>
                        <option value="FISH"
                                th:selected="${editAccount.favouriteCategoryId eq 'FISH'}"
                        >FISH
                        </option>
                        <option value="REPTILES"
                                th:selected="${editAccount.favouriteCategoryId eq 'REPTILES'}"
                        >REPTILES
                        </option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Enable MyList</td>
                <td>
                    <input type="checkbox" name="listOption" value="true"
                           th:checked="${editAccount.listOption}"
                    >
                </td>
            </tr>
            <tr>
                <td>Enable MyBanner</td>
                <td>
                    <input type="checkbox" name="bannerOption" value="true"
                           th:checked="${editAccount.bannerOption}"
                    >
                </td>
            </tr>

        </table>

        <p align="center"><a href="/order/viewOrderList" class="register-link">My orders</a></p>
        <p align="center"><font color="red" name="errormsg"></font></p>

        <input onclick=" return check()" type="submit" name="editAccount" value="Save Account Information" class="dissociated-btn"/>


    </form>
</div>
</div>
<div th:replace="common/bottom"></div>
</body>
</html>